<template>
  <!-- 添加住院费用信息页面 -->
  <div id="app">
    <!-- 设置顶部导航栏 -->
    <mt-header title="添 加 住 院 费 用 信 息">
      <mt-button icon="back" @click="goBack" slot="left">返回</mt-button>
      <mt-button slot="right" @click="goHome">
        <img
          src="../../assets/images/home.png"
          height="20"
          width="20"
          slot="icon"
          style="margin-top: 5px"
        />
      </mt-button>
    </mt-header>

    <!-- 内容区域 -->
    <van-form @submit="confirmSub">
      <van-field
        v-model="dataList.PatientName"
        name="病人姓名"
        label="病人姓名"
        placeholder="请填写病人姓名"
        :rules="[{ required: true, message: '请填写病人姓名' }]"
      />
      <van-field
        v-model="dataList.PatientAge"
        type="number"
        name="病人年龄"
        label="病人年龄"
        placeholder="请输入病人年龄"
        :rules="[{ required: true, message: '请填写病人年龄' }]"
      />
      <van-field
        v-model="dataList.PatientId"
        name="身份证"
        label="身份证"
        placeholder="请填写病人身份证"
        :rules="[{ required: true, message: '请填写身份证' }]"
      />
      <van-field
        clearable
        type="number"
        v-model="dataList.generatedCost"
        label="已产生费用"
        placeholder="请输入已产生费用"
        :rules="[{ required: true, message: '请输入已产生费用' }]"
      />
      <van-field
        clearable
        type="number"
        v-model="dataList.paid"
        label="已支付费用"
        placeholder="请输入已支付费用"
        :rules="[{ required: true, message: '请输入已支付费用' }]"
      />
      <!-- <van-field
        disabled
        v-model="surplus"
        label="剩余差价"
        placeholder="自动计算"
      /> -->
      <div class="surplus">
        <div class="surplusLeft">当前剩余未支付费用：</div>
        <div class="surplusRight">{{ surplus }}</div>
      </div>
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </van-form>
  </div>
</template>

<script>
// import { Toast } from "vant";
import { Dialog } from "vant";
export default {
  name: "addExpense",

  data() {
    return {
      //surplus: null, //剩余差价
      dataList: {
        PatientName: "",
        PatientAge: "",
        PatientId: "", //身份证
        generatedCost: null, //已产生费用
        paid: null, //已支付费用
      },
    };
  },

  mounted() {},

  methods: {
    goBack() {
      this.$router.push({
        path: "./PatientIndex",
      });
    },
    goHome() {
      this.$router.push({
        path: "./index",
      });
    },
    //提交按钮点击
    confirmSub() {
      Dialog.confirm({
        title: "提示",
        message: "是否确认添加信息",
        confirmButtonColor: "#07c160",
        cancelButtonColor: "#ff976a",
      })
        .then(() => {
          //调用支付接口
          this.ToAddApi();
        })
        .catch(() => {
          console.log("cancel");
        });
    },
    //调用添加接口
    ToAddApi() {
      console.log(this.dataList);
    },
  },
  computed: {
    surplus: function () {
      let surplus = this.dataList.generatedCost - this.dataList.paid
      if ( surplus> 0) {
        return surplus + "￥";
      } else {
        return 0;
      }
    },
  },
};
</script>

<style lang="less" scoped>
#app /deep/ .mint-header-title {
  overflow: initial;
}
.surplus {
  display: flex;
  justify-content: center;
  line-height: 1.5rem;
  padding: 20px 0;
  font-size: 22px;
  color: #07c160;
  background-color: #fff;
  .surplusRight {
    padding-left: 10px;
    font-weight: 700;
  }
}
</style>